/* eslint-disable @typescript-eslint/no-explicit-any */
import { Grid, GridRowDragDetail, List } from '../imports';
import { bar } from '../style.css';

function addData(data: any, pid: string, level: number) {
	for (let i = 1; i <= 2; i++) {
		const row: any = { id: pid + i, text: pid + i + '：一些数据' + (pid + i) };
		if (level < 2) {
			row.children = [];
			addData(row.children, row.id + '-', level + 1);
		}
		data.push(row);
	}
}

export const LIST_DATA = [];
addData(LIST_DATA, '', 0);

export function ReorderListPage() {
	return (
		<>
			<h2>可以拖拽排序的列表（标准行为）</h2>
			<List
				disableOn="disable"
				rowDraggable
				class="highligh-hover"
				column={{ text: 'text', children: 'children', expand: 'expand' }}
				rows={structuredClone(LIST_DATA)}
				onRowDragStart={function (detail, evt) {
					this.startDragReorder(detail, evt);
				}}
			/>
			<h2>自定义可以拖拽的列表（不做动作）</h2>
			<List
				disableOn="disable"
				rowDraggable
				class="highligh-hover"
				column={{ text: 'text', children: 'children', expand: 'expand' }}
				rows={structuredClone(LIST_DATA)}
				onRowDragStart={function (detail, evt) {
					// console.log(detail);
					setTimeout(() => {
						this.collapseRow(detail.row.row);
					});
					this.startDrag(detail, evt, {
						onCompareRow(r1, r2) {
							return r1.row === r2.row;
						},
						onRowConfig: () => ({
							allowDragOver: true,
						}),
						onRowLongHover: (detail) => {
							if (detail.row.row.children && detail.row.row.children.length > 0) {
								if (!detail.row.row.expand) {
									this.expandRow(detail.row.row);
								} else {
									this.collapseRow(detail.row.row);
								}
							}
						},
						onDragEnd(dragRow, targetRow, targetPos) {
							console.log(`from: ${dragRow.rowIndex} to ${targetRow?.rowIndex}, pos: ${targetPos}`);
						},
					});
				}}
			/>
			<h2>可以拖拽排序的表格</h2>
			<Grid
				rows={LIST_DATA}
				rowDraggable
				columns={[{ title: 'text', key: 'text' }]}
				onRowDragStart={function (detail, evt) {
					this.startDragReorder(detail, evt);
				}}
			/>
		</>
	);
}
